function leftX() {
    return config.SVG_WIDTH/2 - data.pic_w/2 - data.side_w;
}

function rightX() {
    return config.SVG_WIDTH/2 + data.pic_w/2 + data.side_w;
}

function topY() {
    return config.SVG_HEIGHT/2 - data.pic_h/2 - data.head_h;
}

function bottomY() {
    return config.SVG_HEIGHT/2 + data.pic_h/2 + data.foot_h;
}

function sumW() {
    return data.pic_w + data.side_w*2;
}

function sumH() {
    return data.pic_h + data.head_h + data.foot_h;
}


function getLSide() {
    var x = leftX();
    var y = topY() + data.head_h;
    return buildRect(x, y, data.side_w, data.pic_h, data.side_color)
}

function getRSide() {
    var x = rightX() - data.side_w;
    var y = topY() + data.head_h;
    return buildRect(x, y, data.side_w, data.pic_h, data.side_color)
}

function getHead() {
    var x = leftX();
    var y = topY();
    return buildRect(x, y, sumW(), data.head_h, data.head_color)
}

function getFoot() {
    var x = leftX();
    var y = config.SVG_HEIGHT/2 + data.pic_h/2;
    return buildRect(x, y, sumW(), data.foot_h, data.foot_color)
}

function buildRect(x, y, w, h, c){
    return {
        x:x,
        y:y,
        w:w,
        h:h,
        color:c
    }
}

function drawFrame() {
    config.TEMP_CONTAINTER.selectAll("rect")
        .data(config.DATA_OF_RECT_SET)
        .enter()
        .append("rect")
        .attr("x", function (d) {
            return d.x;
        })
        .attr("y", function (d) {
            return d.y;
        })
        .attr("width", function (d) {
            return d.w;
        })
        .attr("height", function (d) {
            return d.h;
        })
        .attr("fill", function (d) {
            return d.color;
        })
        .attr("stroke", "black")
        .attr("stroke-width", 0.5)
//        .on("dblclick", function(d){
//            d3.select(this)
//                .style("stroke", "white")
//                .style("stroke-width", "1")
//            ;
//            console.log($("a_a_dialog"));
//
//            $("a_a_dialog").click();
//        })
    ;
}

function drawText(svg) {
    svg.selectAll("text")
        .data(config.DATA_OF_RECT_SET)
        .enter()
        .append("text")
        .attr("x", function (d) {
            return d.x;
        })
        .attr("y", function (d) {
            return d.y + d.h/2
        })
//        .attr("dx", function (d) {
//            if(d.h < d.w) {
//                return -10;
//            }
//        })
        .attr("dy", function (d) {
            return 5;
        })
        .attr("fill", "white")
        .text(function(d){
            if(d.h < d.w) {
                return d.h;
            }else{
                return d.w;
            }

        })
    ;
}

function redrawFrame(svg) {
    config.DATA_OF_RECT_SET = [
        getHead(config, data),
        getRSide(config, data),
        getFoot(config, data),
        getLSide(config, data)
    ]
    svg.selectAll("rect")
        .data(config.DATA_OF_RECT_SET)
        .transition()
        .duration(500)
        .attr("x", function(d) {return d.x;})
        .attr("y", function(d) {return d.y;})
        .attr("width", function(d) {return d.w;})
        .attr("height", function(d) {return d.h;})
        .attr("fill", function(d){return d.color;})
        .attr("stroke", "black")
        .attr("stroke-width", 0.5);
}

function drawFootStick(stick_h, stick_color) {
    var stick_w = stick_h;
    var stick_x = leftX();
    var stick_y = bottomY();
    var left_x = stick_x - stick_w;
    var left_y = stick_y;
    var right_x = rightX() + stick_w;
    var right_y = stick_y + stick_h;

    // 画地杆
    config.TEMP_CONTAINTER.append("path")
        .attr({
            d: "m "+stick_x+","+stick_y+" h " + sumW() + " v "+ stick_h +" h "+(-sumW())+" v " + (-stick_h)
        })
        .attr("fill", stick_color)
        .attr("stroke", "black")
        .attr("stroke-width", 0.5);
    ;
    // 画左耳朵
    config.TEMP_CONTAINTER.append("path")
        .attr({
            d: "m "+left_x+","+left_y+" a 2,3 0 0 0 0," + stick_h + " h "+stick_w+" v "+(-stick_h)+" h " + (-stick_w)
        })
    ;
    // 画右耳朵
    config.TEMP_CONTAINTER.append("path")
        .attr({
            d: "m "+right_x+","+right_y+" a 2,3 0 0 0 0," + (-stick_h) + " h "+(-stick_w)+" v "+ stick_h +" h " + stick_w
        })
    ;
}

function drawHeadStick(stick_h, stick_color) {
    var stick_w = stick_h;
    var stick_x = leftX();
    var stick_y = topY() - stick_h;
    var rope_width = sumW()/4;
    // 画天杆
    config.TEMP_CONTAINTER.append("path")
        .attr({
            d: "m "+stick_x+","+stick_y+" h " + sumW() + " v "+ stick_h +" h "+(-sumW())+" v " + (-stick_h)
        })
        .attr("fill", stick_color)
        .attr("stroke", "black")
        .attr("stroke-width", 0.5)
    ;
    // 画天杆绳带
    config.TEMP_CONTAINTER.append("path")
        .attr({
            d: "m "+(config.SVG_WIDTH/2 - rope_width/2)+","+stick_y+" l " + rope_width/2 +", " + (-rope_width/2) + " l "+ rope_width/2 +", "+rope_width/2
        })
        .attr("fill", "none")
        .attr("stroke", "black")
    ;
}

function drawZoomLayout(){
    svg.append("rect")
        .attr("width", config.SVG_WIDTH)
        .attr("height", config.SVG_HEIGHT)
        .style("fill", "none")
        .style("pointer-events", "all");
}

function drawAll2(){
    config.DATA_OF_RECT_SET = [
        getHead(config, data),
        getRSide(config, data),
        getFoot(config, data),
        getLSide(config, data)
    ]

    drawZoomLayout();

    config.TEMP_CONTAINTER = svg.append("g");

    drawFrame();

    if(data.stick > 0) {
        drawFootStick(data.stick , "#666666");
        drawHeadStick(data.stick , "#666666");
    }


//    drawText(svg);

}


function zoomed() {
    config.TEMP_CONTAINTER.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}